<template>
  <view :class="['order-page', { 'slide-in': animateIn, 'slide-out': animateOut }]">
    <view class="top-bar">
      <view class="top-left">
        <image class="back-icon" src="/static/images/order/back.png" mode="widthFix" @tap="goBackWithAnimation" />
        <button class="buyer-btn active">临时买家</button>
        <button class="buyer-btn">张三</button>
      </view>
      <view class="top-right">
        <image class="add-icon" src="/static/images/order/add.png" mode="widthFix" @tap="onAdd" />
      </view>
    </view>

    <view class="content-wrapper">
      <view class="left-area">
        <view class="left-area-inner">
          <scroll-view class="left-menu" scroll-y>
            <view v-for="(item, index) in supplierList" :key="index" class="menu-item"
              :class="{ active: activeSupplier === item.id }" @tap="onSupplierSelect(item.id)">
              <view class="supplier-name">{{ item.name }}</view>
              <view class="supplier-code">{{ item.code }}</view>
              <image v-if="activeSupplier === item.id" class="arrow-icon"
                src="/static/images/order/arrow_right_green.png" mode="widthFix" />
            </view>
          </scroll-view>
          <view class="add-batch-btn">
            <image class="add-batch-icon" src="/static/images/order/plus_white.png" mode="widthFix" />
            <text class="add-batch-text">新增批次</text>
          </view>
        </view>
      </view>
      <view class="main-content">
        <view class="search-row">
          <view class="search-box">
            <image class="search-icon" src="/static/images/order/icon_search.png" mode="widthFix" />
            <view class="input-container">
              <input class="search-input" type="text" v-model="searchKey" @focus="isFocused = true"
                @blur="isFocused = false" />
              <text class="placeholder-label" :class="{ 'active': isFocused || searchKey }"
                @tap="focusInput">搜索货品名称或首字母</text>
            </view>
          </view>
        </view>

        <scroll-view class="product-list" scroll-y>
          <transition mode="out-in" name="layout-toggle">
            <transition-group v-if="isGridView" tag="view" class="product-container grid-view" name="card">
              <view v-for="(product, index) in filteredProducts" :key="product.name + index" class="product-card">
                <view class="product-content-grid">
                  <view class="product-top">
                    <image class="product-img" :src="product.img" mode="aspectFill" />
                    <view class="product-details">
                      <text class="product-name">{{ product.name }}</text>
                      <view class="product-host" :style="{
                        backgroundColor: product.hostColor || '#FFFFFF',
                        color: product.hostColor ? '#FFFFFF' : '#999999'
                      }">
                        {{ product.host }}
                      </view>
                      <view class="product-tag">{{ product.tag }}</view>
                    </view>
                  </view>
                  <text class="product-stock">存：{{ product.stock }}</text>
                </view>
              </view>
            </transition-group>
            <transition-group v-else tag="view" class="product-container list-view" name="card">
              <view v-for="(product, index) in filteredProducts" :key="product.name + index" class="product-card">
                <view class="product-content-list">
                  <image class="product-img" :src="product.img" mode="aspectFill" />
                  <text class="product-name">{{ product.name }}</text>
                  <view class="product-host" :style="{
                    backgroundColor: product.hostColor || '#FFFFFF',
                    color: product.hostColor ? '#FFFFFF' : '#999999'
                  }">
                    {{ product.host }}
                  </view>
                  <view class="product-tag">{{ product.tag }}</view>
                  <text class="product-stock">存：{{ product.stock }}</text>
                </view>
              </view>
            </transition-group>
          </transition>
        </scroll-view>
      </view>
      <view class="right-index">
        <view class="right-index-image">
          <image class="toggle-layout-icon" src="/static/images/order/layout.png" @tap="toggleLayout" />
        </view>
        <view v-for="(letter, index) in indexLetters" :key="index" class="index-letter"
          @tap.stop="onIndexLetterTap(letter, index)">
          {{ letter }}
        </view>
      </view>

      <view v-if="showLetterBubble" class="letter-panel" :style="{ top: letterBubbleTop + 'rpx' }" @tap.stop>
        <view class="bubble-line">
          <view class="letter-bubble">{{ bubbleLetter }}</view>
          <view class="letter-list">
            <view v-for="(option, i) in letterOptions" :key="option" class="letter-option"
              @tap="onLetterOptionSelect(option)">
              {{ option }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="bottom-bar">
      <view class="bottom-info">
        <text class="bottom-selected">已选{{ selectedCount }}种货品</text>
        <text class="bottom-total">
          合计：<text class="amount">{{ totalAmount }}元</text>
        </text>
      </view>
      <button class="go-order-btn" @tap="onGoOrder">去开单</button>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  import { usePageAnimation } from '@/mixins/pageAnimation';

  const { animateIn, animateOut, triggerExitAnimation } = usePageAnimation();


  const supplierList = ref([
    { id: 0, name: '全部在售', code: '0008' },
    { id: 1, name: '王老板', code: '0008' },
    { id: 2, name: '阿里', code: '0001' },
    { id: 3, name: '白白', code: '0002' },
    { id: 4, name: '测测', code: '0003' },
    { id: 5, name: '迪迪', code: '0004' },
  ])

  const activeSupplier = ref(0)

  const allProducts = ref([
    { name: '芜湖青椒', img: '/static/images/order/product_greenpepper.png', host: '王老板/0008', tag: '1件=10公斤', stock: '9999件20公斤' },
    { name: '土豆', img: '/static/images/order/product_potato.png', host: '王老板/0008', tag: '1件=10公斤', stock: '9999件20公斤', hostColor: '#EB0E0E' },
    { name: '啊哈蔬菜', img: '/static/images/order/product_greenpepper.png', host: '阿里/0001', tag: '1件=10公斤', stock: '100件5公斤', hostColor: '#EB0E0E' },
    { name: '白萝卜', img: '/static/images/order/product_greenpepper.png', host: '白白/0002', tag: '1件=10公斤', stock: '500件10公斤', hostColor: '#EB0E0E' },
    { name: '测试菜', img: '/static/images/order/product_greenpepper.png', host: '测测/0003', tag: '1件=10公斤', stock: '300件2公斤', hostColor: '#EB0E0E' },
    { name: '苹果', img: '/static/images/order/product_greenpepper.png', host: '阿里/0001', tag: '1件=10公斤', stock: '200件10公斤', hostColor: '#EB0E0E' },
    { name: '安静菜', img: '/static/images/order/product_greenpepper.png', host: '阿里/0001', tag: '1件=10公斤', stock: '50件2公斤', hostColor: '#EB0E0E' },
    { name: '澳洲瓜', img: '/static/images/order/product_greenpepper.png', host: '阿里/0001', tag: '1件=10公斤', stock: '10件2公斤', hostColor: '#EB0E0E' }
  ])

  const indexLetters = ref(['全', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'W', 'X', 'Y', 'Z'])

  const selectedCount = ref(2)
  const totalAmount = ref(99999)
  const searchInput = ref(null)
  const isGridView = ref(true)
  const searchKey = ref('')
  const isFocused = ref(false)
  const filterLetter = ref('')

  const filteredProducts = computed(() => {
    let list = allProducts.value
    if (searchKey.value) {
      list = list.filter(p => p.name.includes(searchKey.value))
    }
    if (filterLetter.value) {
      list = list.filter(p => {
        const firstChar = p.name.charAt(0).toUpperCase()
        return firstChar === filterLetter.value.toUpperCase()
      })
    }
    return list
  })

  function goBack() {
    uni.redirectTo({
      url: '/pages/tab/home/index'
    })
  }
  onMounted(() => {
    setTimeout(() => {
      animateIn.value = true;
    }, 10);
  });

  function goBackWithAnimation() {
    triggerExitAnimation(() => {
      uni.navigateBack();
    });
  }
  function onAdd() {
    console.log('add new item')
  }
  function focusInput() {
    if (searchInput.value) {
      searchInput.value.focus()
    }
  }
  function onSearch(e : any) {
    searchKey.value = e.detail.value
  }

  function onSupplierSelect(id : number) {
    activeSupplier.value = id

  }

  function onGoOrder() {
    uni.navigateTo({
      url: '/pages/tab/order/input'
    })
  }

  function toggleLayout() {
    isGridView.value = !isGridView.value
  }

  const showLetterBubble = ref(false)
  const bubbleLetter = ref('')
  const letterBubbleTop = ref(0)
  const letterHeight = 30

  const letterMap : Record<string, string[]> = {
    '全': ['全部'],
    'A': ['A', '阿', '啊', '安', '澳', '艾'],
    'B': ['B', '巴', '白', '北', '本'],
    'C': ['C', '测', '菜', '参', '粗'],
  }

  const letterOptions = ref<string[]>([])
  let bubbleTimer : any = null

  function onIndexLetterTap(letter : string, index : number) {
    if (bubbleTimer) {
      clearTimeout(bubbleTimer)
    }
    bubbleLetter.value = letter
    showLetterBubble.value = true
    letterBubbleTop.value = index * letterHeight + 100
    letterOptions.value = letterMap[letter] || [letter]
    if (letter === '全') {
      filterLetter.value = ''
    }
    bubbleTimer = setTimeout(() => {
      hideLetterPanel()
    }, 5000)
  }

  function onLetterOptionSelect(option : string) {
    if (bubbleTimer) {
      clearTimeout(bubbleTimer)
    }
    const firstChar = option.charAt(0).toUpperCase()
    if (option === '全部') {
      filterLetter.value = ''
    } else {
      filterLetter.value = firstChar
    }
    hideLetterPanel()
  }

  function hideLetterPanel() {
    if (bubbleTimer) {
      clearTimeout(bubbleTimer)
      bubbleTimer = null
    }
    showLetterBubble.value = false
  }
</script>

<style scoped>
  .order-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    height: 100vh;
  }

  .order-page.slide-in {
    transform: translateX(0);
    transition: transform 0.3s ease-out;
  }

  .order-page.slide-out {
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
  }

  .top-bar {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 0 20rpx;
    height: 80rpx;
    border-bottom: 1rpx solid #eee;
    z-index: 10;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  .top-left {
    display: flex;
    align-items: center;
  }

  .back-icon {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
  }

  .buyer-btn {
    background: #fff;
    color: #333;
    border-radius: 8rpx;
    padding: 10rpx 20rpx;
    height: 60rpx;
    line-height: 40rpx;
    font-size: 28rpx;
    margin-right: 10rpx;
    font-weight: bold;
    border: 1rpx solid #000;
  }

  .buyer-btn.active {
    background: rgba(67, 207, 124, 1);
    color: #fff;
    border: none;
  }

  .top-right {
    display: flex;
    align-items: center;
  }

  .add-icon {
    width: 50rpx;
    height: 50rpx;
    font-weight: bold;
  }

  .content-wrapper {
    position: relative;
    overflow: hidden;
    margin-top: 80rpx;
    margin-bottom: 100rpx;
  }

  .left-area {
    position: fixed;
    top: 80rpx;
    left: 0;
    bottom: 100rpx;
    width: 180rpx;
    background: rgba(67, 207, 124, 1);
    display: flex;
    flex-direction: column;
    border-top-right-radius: 20rpx;
    overflow: hidden;
    z-index: 5;
  }

  .left-area-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .left-menu {
    flex: 1;
    overflow-y: auto;
  }

  .menu-item {
    position: relative;
    padding: 20rpx;
    color: #fff;
    font-size: 43rpx;
    border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
  }

  .menu-item.active {
    background: #fff;
    color: #43CF7C;
    font-weight: bold;
  }

  .menu-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 6rpx;
    background-color: #43CF7C;
    border-top-radius: 6rpx;
    border-bottom-radius: 6rpx;
  }

  .arrow-icon {
    position: absolute;
    right: 10rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 20rpx;
    height: 20rpx;
  }

  .supplier-name {
    font-size: 24rpx;
    margin-bottom: 5rpx;
  }

  .supplier-code {
    font-size: 20rpx;
  }

  .add-batch-btn {
    background: #fff;
    margin: 10rpx 6rpx 4rpx 4rpx;
    border-radius: 6rpx;
    display: flex;
    align-items: center;
    padding: 0 10rpx;
    height: 60rpx;
  }

  .add-batch-icon {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
  }

  .add-batch-text {
    font-size: 24rpx;
    color: #333;
  }

  .main-content {
    margin-left: 180rpx;
    margin-right: 40rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f5f7fa;
    box-sizing: border-box;
    padding: 20rpx;
  }

  .search-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
  }

  .search-box {
    display: flex;
    align-items: center;
    background: #ffffff;
    height: 70rpx;
    border-radius: 35rpx;
    padding: 0 20rpx;
    flex: 1;
    margin-right: 20rpx;
  }

  .search-icon {
    width: 34rpx;
    height: 34rpx;
    margin-right: 20rpx;
  }

  .input-container {
    position: relative;
    width: 100%;
    pointer-events: auto;
    cursor: text;
  }

  .search-input {
    flex: 1;
    font-size: 24rpx;
    background: transparent;
    border: none;
    padding: 10rpx 10rpx;
    height: 56rpx;
    box-sizing: border-box;
  }

  .placeholder-label {
    position: absolute;
    top: 50%;
    left: 10rpx;
    transform: translateY(-55%);
    letter-spacing: 1rpx;
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.2);
    pointer-events: none;
    transition: all 0.3s ease;
  }

  .placeholder-label.active {
    display: none;
  }

  .toggle-layout-icon {
    width: 50rpx;
    height: 50rpx;
    margin-top: 25rpx;
  }

  .product-list {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }

  .product-container {
    display: flex;
    flex-wrap: wrap;
    padding: 10rpx;
    box-sizing: border-box;
    justify-content: space-between;
  }

  .product-card {
    width: 49%;
    box-sizing: border-box;
    border: 1rpx solid #f0f0f0;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
    padding: 16rpx;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
  }

  .product-content-grid .product-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 12rpx;
  }

  .product-content-grid .product-img {
    width: 80rpx;
    height: 80rpx;
    flex-shrink: 0;
    border-radius: 8rpx;
    object-fit: cover;
    margin-right: 20rpx;
  }

  .product-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .product-name {
    font-size: 22rpx;
    font-weight: bold;
    margin-bottom: 8rpx;
    color: #333;
  }

  .product-host {
    font-size: 12rpx;
    padding: 4rpx 8rpx;
    border-radius: 4rpx;
    margin-bottom: 8rpx;
    transition: all 0.3s ease;
  }

  .product-tag {
    font-size: 12rpx;
    padding: 4rpx;
    border-radius: 4rpx;
    margin-bottom: 8rpx;
    text-align: center;
    border: 1rpx solid #09D65B;
    background-color: #ffffff;
    color: #09D65B;
  }

  .product-stock {
    font-size: 18rpx;
    color: #333;
    font-weight: bold;
  }

  .product-content-list {
    width: 100%;
  }

  .product-content-list .product-img {
    width: 100%;
    height: 120rpx;
    border-radius: 8rpx;
    object-fit: cover;
    margin-bottom: 10rpx;
  }

  .product-content-list .product-name {
    margin-left: 2rpx;
    margin-bottom: 4rpx;
  }

  .product-content-list .product-host {
    width: 45%;
    text-align: left;
    margin-bottom: 3rpx;
  }

  .product-content-list .product-tag {
    width: 35%;
    margin-bottom: 1rpx;
  }

  .right-index {
    width: 50rpx;
    background: #fff;
    position: fixed;
    right: 0;
    top: 80rpx;
    bottom: 100rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    z-index: 10;
    padding: 0;
  }

  .right-index-image {
    width: 100%;
    background: #F5F7FA;
    padding-bottom: 20rpx;
    padding-right: 3rpx;
  }

  .index-letter {
    font-size: 32rpx;
    color: #808080;
    padding: 4rpx 2rpx;
    text-align: center;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.3s ease;
  }

  .letter-panel {
    position: absolute;
    right: 60rpx;
    display: flex;
    flex-direction: column;
    z-index: 100;
    background: #fff;
    border: 1rpx solid #ddd;
    border-radius: 8rpx;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
    padding: 10rpx;
  }

  .bubble-line {
    display: flex;
    align-items: center;
  }

  .letter-bubble {
    width: 30rpx;
    height: 30rpx;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10rpx;
    color: #fff;
    font-size: 24rpx;
    font-weight: bold;
  }

  .letter-list {
    display: flex;
    flex-direction: column;
  }

  .letter-option {
    font-size: 32rpx;
    padding: 10rpx 0;
    color: #333;
    border-bottom: 1rpx solid #eee;
    cursor: pointer;
  }

  .letter-option:last-child {
    border-bottom: none;
  }

  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100rpx;
    background: #fff;
    border-top: 1rpx solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    z-index: 20;
  }

  .bottom-info {
    display: flex;
    flex-direction: column;
    font-size: 32rpx;
    color: #333;
    flex: 1;
  }

  .bottom-selected {
    font-size: 28rpx;
    font-weight: 600;
    color: #666;
    margin-top: 5rpx;
    margin-bottom: 5rpx;
    margin-left: 25rpx;
  }

  .bottom-total {
    font-size: 24rpx;
    color: #333;
  }

  .amount {
    color: #E74C3C;
    font-size: 28rpx;
    font-weight: bold;
  }

  .go-order-btn {
    background: rgba(17, 237, 105, 1);
    color: #fff;
    border-radius: 90rpx;
    height: 80rpx;
    width: 190rpx;
    line-height: 70rpx;
    font-size: 36rpx;
    border: none;
    cursor: pointer;
  }

  .layout-toggle-enter-active,
  .layout-toggle-leave-active {
    transition: opacity 0.3s ease;
  }

  .layout-toggle-enter,
  .layout-toggle-leave-to {
    opacity: 0;
  }

  .card-enter-active,
  .card-leave-active {
    transition: all 0.2s ease;
  }

  .card-enter {
    opacity: 0;
    transform: translateY(10px);
  }

  .card-leave-to {
    opacity: 0;
    transform: translateY(-10px);
  }
</style>
